<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    #all{
      width: auto;
      height: 2000px;
      background-color: #9f9f9f;
    }
    #head{
      width: auto;
      height: 100px;
      background-color: #00f7de;
      border: 1px black solid;
    }
    #h_l{
      float: left;
      width: 100px;
      height: 80px;
      margin: 0 auto;
      margin-left: 2%;
      line-height: 100px;
    }
    #h_l span{

    }
    #h_m{
      float: left;
      width: 200px;
      height: 80px;
      margin: 0 auto;
      margin-left: 35%;
      line-height: 100px;
    }
    #h_m span{

    }
    #h_r{
      float: left;
      width: 100px;
      height: 100px;
      margin-left: 35%;
    }
    #img{
      width: 70px;
      height: 90px;
      border: 1px solid black;
      margin-top: 5px;
    }
    #main{
      width: auto;
      height: 700px;
      background-color: #ffb800;
      padding-top: 100px;
      padding-bottom: 50px;
    }
    #m_m{
      width: 1000px;
      height: 700px;
      margin: 0 auto;
      background-color: #9f9f9f;
      float: left;
    }
    #m_l{
      width: 15%;
      height: 350px;
      float: left;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #changevideo{
      width: auto;
      height: 50px;
    }
    #video_path{
      width: 80%;
      height: 50px;
      float: left;
    }
    #video_up{
      margin-left: 2.5%;
      width: 15%;
      height: 50px;
      float: left;
    }
    #talk_board{
      width:998px;
      height: 298px;
      overflow-y:auto;
      border: #0c0c0c 1px solid;
      border-right:  0px;
    }
    .message{
      width: 90%;
      height: 70px;
      margin: 0 auto;
      border: 2px #c2be9e solid;
      border-radius: 10px;
      margin-top: 30px;
    }
    .msg_l{
      float: left;
      margin-top: 2.5px;
      margin-left:10px;
      width: 65px;
      height: 65px;
    }
    .msg_img_d{
      margin: 0 auto;
      width: 48px;
      height: 48px;
      border: 1px black solid;
    }
    .msg_img{
      width: 48px;
      height: 48px;
    }
    .msg_name{
      margin: 0 auto;
      width: 65px;
      height: 17px;
      font-size: 10px;
      display:block;
      text-align:center;
    }
    .msg_text_d{
      margin-top: 1.5px;
      width: 500px;
      height: 65px;
      float: left;
      border: 1px black solid;
      margin-left: 20px;
      border-radius: 5px;
    }
    .msg_text{
      margin-top: 5px;
      margin-left: 5px;
    }
    #m_r{
      width: 17%;
      height: 350px;
      float: left;
    }
    #title{
      width: 1000px;
      height: 50px;
      line-height: 50px;
    }
    #title span{
      font-size: 30px;
      display:block;
      text-align:center;
    }
    #video{
      width: 998px;
      height: 598px;
      border: #0c0c0c 1px solid;
      border-right:0px;
    }
    #send{
      width: 1000px;
      height: 50px;
    }
    #send_text{
      margin: 0 auto;
      margin-top: 4px;
      margin-left: 70px;
      height: 40px;
      width: 595px;
      float: left;
      resize: none;
    }
    #send_btn{
      width: 90px;
      height: 40px;
      margin-top: 5px;
      margin-left: 5px;
      float: left;
      cursor: pointer;
    }
    #fly_r{
      position: fixed;
      right: -100px;
      top: 30%;
    }
    #fly_r:hover{
      right: 0px;
    }
    #main1{
      width: auto;
      height: 700px;
      background-color: #1e9fff;
      padding-bottom: 100px;
    }
    #m1_m{
      width: 1000px;
      height: 700px;
      margin: 0 auto;
      background-color: #9f9f9f;
      float: left;
    }
    #m1_l{
      width: 15%;
      height: 350px;
      float: left;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #m1_r{
      width: 17%;
      height: 350px;
      float: left;
    }
  </style>
</head>

<body>
<div id="all">
  <div id="head">
    <div id="h_l">
      <span>欢迎,[[*{session.user.user_name}]]</span>
    </div>
    <div id="h_m">
      <span id="time"></span>
    </div>
    <div id="h_r">
      <div id="img_div">
        <img id="img" src="/userimg/undefined.jpg"/>
      </div>
    </div>
  </div>
  <div id="main">
    <div id="m_l">
      <div id="changevideo">
        <input id="video_path" type="text" value="输入bilibili视频BV号 例:BV123456789"/>
        <button id="video_up" onclick="videoup()" >提交</button>
      </div>
    </div>
    <div id="m_m">
      <div id="title">
        <span>观影院</span>
      </div>
      <div id="video">
        <input type="hidden" id="video_p" th:value="${application.videopath}" >
        <a id="video_a" th:href="${application.videopath}"></a>
      </div>
      <div id="send">
        <textarea id="send_text" maxlength="80"></textarea>
        <button id="send_btn" onclick="send()">发送</button>
      </div>
    </div>
    <div id="m_r">

    </div>
  </div>
  <div id="main1">
    <div id="m1_l"></div>
    <div id="m1_m">
      <div id="talk_board">
        <div class="message">
          <div class="msg_l">
            <div class="msg_img_d">
              <img class="msg_img" src="/userimg/undefined.jpg"/>
            </div>
            <div>
              <span class="msg_name">你的名字</span>
            </div>
          </div>
          <div class="msg_text_d">
          <span class="msg_text">
            这个视频,很有趣
          </span>
          </div>
        </div>
      </div>
    </div>
    <div id="m1_r"></div>
  </div>
  <div id="fly_r"></div>
</div>

  <script src="./layui/layui.js"></script>
  <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
  <script type="text/javascript" src="js/ajaxfileupload.js" charset="GBK"></script>

  <script>
    var _bilioption= {"container":"#video","position":"self","width":"998px","height":"598px"};
  </script>
  <script asyn="asyn" src="//cdn.jsdelivr.net/gh/sl514/myres@master/biliparse.js"></script>

  <script th:inline="javascript">
    function setImg(){
      var imgObjPreview=document.getElementById("img");
      imgObjPreview.src = [[*{session.user.user_img_path}]] + [[*{session.user.user_img_name}]] ;
    }
  </script>
  <script type="text/javascript">
    $(function() {
      init();
      $('#fly_r').load('userlist.html');
    })
    function init() {
      setImg();
      setTime();
    }
    function setTime(){
      var time=document.getElementById("time");
      var date=new Date();
      time.innerHTML = date.toLocaleString();
    }
    function send(){
      var text = $('#send_text').val();
      if(text!=""||text!=null){
        $.ajax({
          type:"post",//请求类型
          url:"sendtalk",//请求地址
          dataType:"json",//交互的数据类型
          data:{
            talk:text
          },
          cache:false,//去除请求的缓存
          success:function(){
            alert("发送成功");
            getTalkList();
          }
        });
      }else{
        alert("请输入发送内容");
      }
    }
    function videoup() {
      var videopath = $("#video_path").val();
      if(videopath=="输入bilibili视频BV号 例:BV123456789" || videopath=="" || videopath==null){
        alert("请输入地址");
        return;
      }
      if(videopath != "" || videopath != null){
        $.ajax({
          type:"post",//请求类型
          url:"changevideo",//请求地址
          dataType:"json",//交互的数据类型
          data:{
            videopath:videopath
          },
          cache:false,//去除请求的缓存
          success:function(){
            alert("发送成功");
            getVideoPath();
          }
        });
      }else{
        alert("请输入视频地址");
      }
    }
    function getVideoPath(){
      var p = "";
      $.ajax({
        type:"post",//请求类型
        url:"getvideopath",//请求地址
        dataType:"text",//交互的数据类型
        success:function(date){
          var videopath = $("#video_p").val();
          p = date;
          if(videopath!=date){
            location.reload();
          }
        }
      });
    }
    function getTalkList() {
      $.ajax({
        type:"post",//请求类型
        url:"gettalk",//请求地址
        dataType:"text",//交互的数据类型
        cache:false,//去除请求的缓存
        success:function(msg){
          var result = $.parseJSON(msg);
          var list = result.talks;
            if(list.length>0){
              var html = "";
              for(var i=0;i<list.length; i++){
                var m = list[i];
                html += "<div class=\"message\"><div class=\"msg_l\">";
                html += "<div class=\"msg_img_d\">";
                html += "<img class=\"msg_img\" src=\""+m.user.user_img_path+m.user.user_img_name+"\"/>";
                html += "</div><div><span class=\"msg_name\">"+m.user.user_name+"</span>";
                html += "</div></div><div class=\"msg_text_d\">";
                html += "<span class=\"msg_text\">"+m.msg_content+"</span>";
                html += "</div></div>";
              }
              $('#talk_board').html($('#talk_board').html()+html);
            }
          },
        error:function() {
            alert("error");
          }
        });
    }

  </script>
  <script language="JavaScript">
    setInterval(function(){getVideoPath();},2500);
    setInterval(function(){setTime();getTalkList();},1000);
    //指定1秒刷新一次
  </script>
</body>
</html>